<template>
    <div class="clock" :title="dateStr" v-text="timeStr"></div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'; // https://dayjs.fenxianglu.cn/category/
import 'dayjs/locale/zh-cn'; // dayjs中文库
import { computed, reactive } from 'vue';

dayjs.locale('zh-cn');

const data = reactive({
    // 当前时间
    now: dayjs(),
});

// 时间计算属性
const timeStr = computed(() => {
    return data.now.format('H:mm');
});

// 日期计算属性
const dateStr = computed(() => {
    return data.now.format('YYYY年M月D日  dddd');
});

// 定时任务，每500毫秒刷新一次时间
setInterval(() => {
    data.now = dayjs();
}, 500);
</script>

<style scoped lang="less">
.clock {
    height: 40px;
    width: 60px;
    font-size: @dps-font-size-base;
    color: @dps-color-white;
    text-align: center;
    line-height: 40px;
    transition: all 100ms;
}

.clock:hover {
    background-color: @dps-color-light-gray-15;
}
</style>
